@extends('extend.home')
<!-- @section('title',$config->title)
@section('keywords',$config->keywords)
@section('description',$config->description)
@section('logo',$config->logo) -->
@section('contet')
<!--  此处为滚动广告
<div id="move" style="width:200px; z-index:100; height:200px; background:orange; border-radius:50%; position:absolute;"></div>
	<script type="text/javascript">
	var move = document.getElementById('move');
	// var step = 3;
	var stepX = 1;
	var stepY = 1;

	var inte = null;

	//绑定一个鼠标的移入事件
	move.onmouseover = function() {
		clearInterval(inte);
	}
	
	//鼠标的离开事件
	move.onmouseout = function() {
		run();
	}

	function run() {
		inte = setInterval(function() {
			//获取元素当前距离左侧的偏移量
			var l = move.offsetLeft;
			var t = move.offsetTop;
			//递增操作
			var newLeft = l + stepX;
			var newTop  = t + stepY;
			//计算最大的left的值
			var maxLeft = document.documentElement.clientWidth - move.offsetWidth;
			//计算最大的top值
			var maxTop = document.documentElement.clientHeight - move.offsetHeight;
			//检测
			if(newLeft >= maxLeft || newLeft <= 0) {
				stepX *= -1;
				// changeBg();
			}

			if(newTop >= maxTop || newTop <=0) {
				stepY *= -1;
				// changeBg();
			}

			//修改元素的left样式
			move.style.left = newLeft + 'px';
			move.style.top = newTop + 'px';
		}, 10);
	}

	run();
	</script>-->
<div class="index_slider">
	<div class="container">
	
	  <div class="callbacks_container">
	      <ul class="rslides" id="slider">
	      @foreach($lunbo as $k=>$v)
	        <li><a href=""><img src="{{$v->photo}}" style="width:1170px;height:325px"class="img-responsive" alt=""/></a></li>
	      @endforeach
	      </ul>
	  </div>
	</div>
</div>
<div class="content_top">
	<div class="container">
		<div class="grid_1">
			<div class="col-md-3">
			 <div class="box2">
			 	<ul class="list1">
			 		<i class="lock"> </i>
			 		<li class="list1_right"><p>高达5%的购物奖励,随时随地购物潮</p></li>
			 		<div class="clearfix"> </div>
			 	</ul>
			 </div>
			</div>
			<div class="col-md-3">
			 <div class="box3">
			 	<ul class="list1">
			 		<i class="clock1"> </i>
			 		<li class="list1_right"><p>乐享优质购物时光,购最优质的商品</p></li>
			 		<div class="clearfix"> </div>
			 	</ul>
			 </div>
			</div>
			<div class="col-md-3">
			 <div class="box4">
			 	<ul class="list1">
			 		<i class="vehicle"> </i>
			 		<li class="list1_right"><p>订单满99元即可包邮到天涯海角</p></li>
			 		<div class="clearfix"> </div>
			 	</ul>
			 </div>
			</div>
			<div class="col-md-3">
			 <div class="box5">
			 	<ul class="list1">
			 		<i class="dollar"> </i>
			 		<li class="list1_right"><p>计划任务精致生活,扩展欢乐时间 </p></li>
			 		<div class="clearfix"> </div>
			 	</ul>
			 </div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="column_center">
			<h1>1 of the most Beautiful online store </h1>
			<h2>Clothes is one of the word'd leading E-commerce companies that designs and develops online stores</h2>
		</div>
		<div class="sellers_grid">
			<ul class="sellers">
				<i class="star"> </i>
				<li class="sellers_desc"><h2>Best Sellers</h2></li>
				<div class="clearfix"> </div>
			</ul>
		</div>
		<div class="grid_2">
			<div class="col-md-3 span_6">
			  <div class="box_inner">
				<img src="/homes/images/p1.jpg" class="img-responsive" alt=""/>
				 <div class="sale-box"> </div>
				 <div class="desc">
				 	<h3>商品名称</h3>
				 	<h4>178,90 $</h4>
				 	<ul class="list2">
				 	  <li class="list2_left"><span class="m_1"><a href="#" class="link">加入购物车</a></span></li>
				 	  <li class="list2_right"><span class="m_2"><a href="#" class="link1">获取更多</a></span></li>
				 	  <div class="clearfix"> </div>
				 	</ul>
				 	<div class="heart"> </div>
				 </div>
			   </div>
			</div>
			<div class="col-md-3 span_6">
			  <div class="box_inner">
				<img src="/homes/images/p2.jpg" class="img-responsive" alt=""/>
				 <div class="sale-box"> </div>
				 <div class="desc">
				 	<h3>商品名称</h3>
				 	<h4>178,90 $</h4>
				 	<ul class="list2">
				 	  <li class="list2_left"><span class="m_1"><a href="#" class="link">加入购物车</a></span></li>
				 	  <li class="list2_right"><span class="m_2"><a href="#" class="link1">获取更多</a></span></li>
				 	  <div class="clearfix"> </div>
				 	</ul>
				 	<div class="heart"> </div>
				 </div>
			   </div>
			</div>
			<div class="col-md-3 span_6">
			  <div class="box_inner">
				<img src="/homes/images/p3.jpg" class="img-responsive" alt=""/>
				 <div class="sale-box"> </div>
				 <div class="desc">
				 	<h3>商品名称</h3>
				 	<h4>178,90 $</h4>
				 	<ul class="list2">
				 	  <li class="list2_left"><span class="m_1"><a href="#" class="link">加入购物车</a></span></li>
				 	  <li class="list2_right"><span class="m_2"><a href="#" class="link1">获取更多</a></span></li>
				 	  <div class="clearfix"> </div>
				 	</ul>
				 	<div class="heart"> </div>
				 </div>
			   </div>
			</div>
			<div class="col-md-3 span_6">
			  <div class="box_inner">
				<img src="/homes/images/p4.jpg" class="img-responsive" alt=""/>
				 <div class="sale-box"> </div>
				 <div class="desc">
				 	<h3>商品名称</h3>
				 	<h4>178,90 $</h4>
				 	<ul class="list2">
				 	  <li class="list2_left"><span class="m_1"><a href="#" class="link">加入购物车</a></span></li>
				 	  <li class="list2_right"><span class="m_2"><a href="#" class="link1">获取更多</a></span></li>
				 	  <div class="clearfix"> </div>
				 	</ul>
				 	<div class="heart"> </div>
				 </div>
			   </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<div class="content_middle">
	<div class="container">
		<ul class="promote">
			<i class="promote_icon"> </i>
			<li class="promote_head"><h3>猜你喜欢</h3></li>
		</ul>
		 <ul id="flexiselDemo3">
						<li><img src="/homes/images/n1.jpg"  class="img-responsive" /><div class="grid-flex"><h4>Contrary to popular </h4><p>589,90 $</p>
							<div class="m_3"><a href="#" class="link2">加入购物车</a></div>
							<div class="ticket"> </div>
						</div></li>
						<li><img src="/homes/images/n2.jpg"  class="img-responsive" /><div class="grid-flex"><h4>Contrary to popular </h4><p>589,90 $</p>
							<div class="m_3"><a href="#" class="link2">加入购物车</a></div>
							<div class="ticket"> </div>
						</div></li>
						<li><img src="/homes/images/n3.jpg"  class="img-responsive" /><div class="grid-flex"><h4>Contrary to popular </h4><p>589,90 $</p>
							<div class="m_3"><a href="#" class="link2">加入购物车</a></div>
							<div class="ticket"> </div>
						</div></li>
						<li><img src="/homes/images/n4.jpg"  class="img-responsive" /><div class="grid-flex"><h4>Contrary to popular </h4><p>589,90 $</p>
							<div class="m_3"><a href="#" class="link2">加入购物车</a></div>
							<div class="ticket"> </div>
						</div></li>
						<li><img src="/homes/images/n5.jpg"  class="img-responsive" /><div class="grid-flex"><h4>Contrary to popular </h4><p>589,90 $</p>
							<div class="m_3"><a href="#" class="link2">加入购物车</a></div>
							<div class="ticket"> </div>
						</div></li>
				     </ul>
				    <script type="text/javascript">
					 $(window).load(function() {
						$("#flexiselDemo3").flexisel({
							visibleItems: 6,
							animationSpeed: 1000,
							autoPlay:true,
							autoPlaySpeed: 3000,    		
							pauseOnHover: true,
							enableResponsiveBreakpoints: true,
					    	responsiveBreakpoints: { 
					    		portrait: { 
					    			changePoint:480,
					    			visibleItems: 1
					    		}, 
					    		landscape: { 
					    			changePoint:640,
					    			visibleItems: 2
					    		},
					    		tablet: { 
					    			changePoint:768,
					    			visibleItems: 3
					    		}
					    	}
					    });
					    
					});
				   </script>
				   <script type="text/javascript" src="/homes/js/jquery.flexisel.js"></script>
	</div>
</div>
<div class="container">
   <div class="content_middle_bottom">
	  <div class="col-md-4">
		  <ul class="spinner">
			<i class="spinner_icon"> </i>
			<li class="spinner_head"><h3>But I must explain</h3></li>
			<div class="clearfix"> </div>
		  </ul>
		  <div class="timer_box">
			<div class="" style="width:340px;height:275px">
				<img src="{{$goodsad->photo}}" style="width:100%;height:100%" alt="">
			</div>
			<div class="timer_grid">
 			<ul id="countdown">
			</ul>
				<ul class="navigation">
					<li>
						<p class="timeRefDays" >DAYS</p>
					</li>
					<li>
						<p class="timeRefHours">HOURS</p>
					</li>
					<li>
						<p class="timeRefMinutes">MINUTES</p>
					</li>
					<li>
						<p class="timeRefSeconds">SECONDS</p>
					</li>
				</ul>
          </div>
          <div class="thumb_desc">
          	<h3>{{$goodsad->title}}</h3>
          	<div class="price">
			   <span class="reducedfrom">${{$goodsad->price+20}}</span>
			   <span class="actual">${{$goodsad->price}}</span>
			</div>
		 </div>
		 <a href="#"><div class="m_3 deal"><div class="link3">点击购买</div></div></a>
		</div>
		</div>
		<div class="col-md-8">
		  <ul class="spinner">
			<i class="paperclip"> </i>
			<li class="spinner_head"><h3>最新博文</h3></li>
			<div class="clearfix"> </div>
		  </ul>
		      <div class="a-top">
				 <div class="left-grid">
					<img src="/homes/images/t4.jpg" class="img-responsive" alt=""/>
				 </div>
				 <div class="right-grid">
					<h4><a href="#">Duis autem vel eum iriure dolor in hendrerit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
				 </div>
				 <div class="but">
				   <a class="arrow" href="#"> </a>
				 </div>
				 <div class="clearfix"></div>
			 </div>
			 <div class="a-top">
				 <div class="left-grid">
					<img src="/homes/images/t5.jpg" class="img-responsive" alt=""/>
				 </div>
				 <div class="right-grid">
					<h4><a href="#">Duis autem vel eum iriure dolor in hendrerit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
				 </div>
				 <div class="but">
				   <a class="arrow" href="#"> </a>
				 </div>
				 <div class="clearfix"></div>
			 </div>
			 <div class="a-top">
				 <div class="left-grid">
					<img src="/homes/images/t6.jpg" class="img-responsive" alt=""/>
				 </div>
				 <div class="right-grid">
					<h4><a href="#">Duis autem vel eum iriure dolor in hendrerit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
				 </div>
				 <div class="but">
				   <a class="arrow" href="#"> </a>
				 </div>
				 <div class="clearfix"></div>
			 </div>
			 <div class="a-top">
				 <div class="left-grid">
					<img src="/homes/images/t7.jpg" class="img-responsive" alt=""/>
				 </div>
				 <div class="right-grid">
					<h4><a href="#">Duis autem vel eum iriure dolor in hendrerit</a></h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>
				 </div>
				 <div class="but">
				   <a class="arrow" href="#"> </a>
				 </div>
				 <div class="clearfix"></div>
			 </div>
		</div>
		<div class="clearfix"></div>
	</div>
    <div class="content_bottom">
    	<div class="col-md-3 span_1">
    	  <ul class="spinner">
			 <i class="box_icon"> </i>
			 <li class="spinner_head"><h3>图片展示</h3></li>
			 <div class="clearfix"> </div>
		  </ul>
		  <img src="{{$someabout->photo}}" style="width:283px;height:198px" class="img-responsive" alt=""/>
    	</div>
    	<div class="col-md-3 span_1">
    	  <ul class="spinner">
			 <i class="bubble"> </i>
			 <li class="spinner_head"><h3>关于我们</h3></li>
			 <div class="clearfix"> </div>
		  </ul>
		  <p>{{$someabout->aboutus}}</p>
    	</div>
    	<div class="col-md-3 span_1">
    	  <ul class="spinner">
			 <i class="mail"> </i>
			 <li class="spinner_head"><h3>合作伙伴</h3></li>
			 <div class="clearfix"> </div>
		  </ul>
		 <ul class="social">
			<li><a href=""> <i class="fb"> </i> </a></li>
		    <li><a href=""><i class="tw"> </i> </a></li>
			<li><a href=""><i class="google"> </i> </a></li>
			<li><a href=""><i class="linkedin"> </i> </a></li>
			<li><a href=""><i class="skype"> </i> </a></li>
		</ul>
    	</div>
    	<div class="col-md-3 span_1">
    	  <ul class="spinner">
			 <i class="mail"> </i>
			 <li class="spinner_head"><h3>联系我们</h3></li>
			 <div class="clearfix"> </div>
		  </ul>
		  <p>{{$someabout->concat}}</p>
		  
		  <p><a href="mailto:info@demo.com"> info(at)gifty.com</a></p>
    	</div>
    	<div class="clearfix"> </div>
    </div>
</div>
@endsection
<!-- @section('link')
	@foreach($link as $k=>$v)
		<li><a href="#">{{$v->name}}</a></li>
	@endforeach
@endsection
 -->
